<template>
  <view :class="className" :style="headStyle" :id="`${selectMark}-box`">
    <view class="benben-flex-tabs" :class="className" :style="[stickyContent, styleInfo]">
      <slot></slot>
    </view>
  </view>
</template>
<script>
export default {
  components: {},
  name: 'benben-flex-tabs',
  props: {
    className: {
      type: String,
      default: '',
    },
    selectMark: {
      type: String,
      default: 'benben-tabs',
    },
    styleInfo: {
      type: Object,
      default: () => ({}),
    },
    scrollspy: {
      type: Boolean,
      default: false,
    },
    value: {
      type: [String, Number],
      default: '',
    },
    openSticky: {
      type: Boolean,
      default: false,
    },
    openTitleType: {
      type: Boolean,
      default: false,
    },
    top: {
      type: [String, Number],
      default: 0,
    },
    zIndex: {
      type: [String, Number],
      default: 90,
    },
    isShowContent: {
      type: Boolean,
      default: false,
    },
    isShowLeft: {
      type: Boolean,
      default: false,
    },
    isShowRight: {
      type: Boolean,
      default: false,
    },
    tabsInfo: {
      type: Object,
      default: () => ({
        lineleft: '',
        lineWidth: '',
        moveX: 0,
        scrollX: 0,
        isInit: false,
      }),
    },
  },
  data() {
    return {
      tabs: [],
      flag: true,
      isScroll: true,
      tabsHeight: 0,
      setTimeoutFn: null,
      flagSetTimeoutFn: null,
      moveX: 0,
      lineWidth: 0,
      lineleft: 0,
      stickyWidth: 'auto',
      stickyHeight: 'auto',
      stickyLeft: 0,
      isFixed: false,
    }
  },
  //监听属性
  watch: {
    value: {
      handler(val, oldVal) {
        this.$emit('change', val)
        this.queryMultipleNodes(val)
        if (this.isScroll) {
          this.pageScrollTo(val)
        }
        this.isScroll = true
      },
    },
    'tabsInfo.PageScrollX': {
      handler(val) {
        if (!this.scrollspy) return
        this.setTimeoutFn && clearTimeout(this.setTimeoutFn)
        this.setTimeoutFn = setTimeout(() => {
          for (let index = 0; index < this.tabs.length; index++) {
            let elementBefore = 0
            let elementAfter = Infinity
            if (index != 0) {
              elementBefore = this.tabs[index].top - this.tabsHeight
            }
            if (index != this.tabs.length - 1) {
              elementAfter = this.tabs[index + 1].top - this.tabsHeight
            }
            if (val + 1 > elementBefore && val + 1 < elementAfter) {
              if (this.tabs[index].name != this.value && this.flag) {
                this.isScroll = false
                this.$emit('input', this.tabs[index].name)
              }
            }
          }
        }, 300)
      },
    },
  },
  computed: {
    headStyle() {
      let style = `box-sizing: content-box;padding-top:${this.openTitleType ? this.StatusBarRpx : 0}rpx;`
      Object.keys(this.styleInfo).forEach((key) => {
        style += `${key}:${this.styleInfo[key]};`
      })
      return style
    },
    stickyContent() {
      let style = {}
      style.position = this.isFixed ? 'fixed' : 'static'
      if (this.openTitleType) {
        style.position = 'fixed'
        style.paddingTop = this.StatusBarRpx + 'rpx'
        style.zIndex = this.zIndex
      } else {
        style.zIndex = this.isFixed ? this.zIndex : 0
      }
      style.top = this.stickyTop + 'px'
      style.left = this.stickyLeft + 'px'
      if (this.stickyWidth != 'auto') {
        style.width = this.stickyWidth + 'px'
      }
      if (this.stickyHeight != 'auto') {
        style.height = this.stickyHeight + 'px'
      }

      return style
    },
    stickyTop() {
      if (this.openTitleType) {
        return Math.floor(this.top / this.unitRatio)
      } else {
        return Math.floor((this.top + this.StatusBarRpx) / this.unitRatio)
      }
    },
  },
  methods: {
    toJSON() {},
    // 获取元素
    uGetRect(selector, all) {
      return new Promise((resolve) => {
        // #ifdef H5
        let dom = document[all ? 'querySelectorAll' : 'querySelector'](selector)
        let rect = all ? [] : {}
        if (all) {
          for (let index = 0; index < dom.length; index++) {
            rect.push(dom[index].getBoundingClientRect())
          }
        } else {
          rect = dom.getBoundingClientRect()
        }
        if (all && Array.isArray(rect) && rect.length) {
          resolve(rect)
        }
        if (!all && rect) {
          resolve(rect)
        }
        // #endif
        // #ifndef H5
        uni
          .createSelectorQuery()
          .in(this)
          [all ? 'selectAll' : 'select'](selector)
          .boundingClientRect((rect) => {
            if (all && Array.isArray(rect) && rect.length) {
              resolve(rect)
            }
            if (!all && rect) {
              resolve(rect)
            }
          })
          .exec()
        // #endif
      })
    },
    initObserveContent() {
      // 获取吸顶内容的高度，用于在js吸顶模式时，给父元素一个填充高度，防止"塌陷"
      this.uGetRect(`#${this.selectMark}-box`).then((res) => {
        this.stickyHeight = res.height
        this.stickyLeft = res.left
        this.stickyWidth = res.width
        if (!this.openTitleType) {
          this.$nextTick(() => {
            this.observeContent()
          })
        }
      })
    },
    observeContent() {
      // 先断掉之前的观察
      this.disconnectObserver('contentObserver')
      let contentObserver = uni.createIntersectionObserver(this)
      /* #ifndef MP-WEIXIN */
      let pages = getCurrentPages()
      let pageInfo = getCurrentPages()[pages.length - 1]
      contentObserver = uni.createIntersectionObserver(pageInfo)
      /* #endif */
      // 到屏幕顶部的高度时触发
      contentObserver.relativeToViewport({
        top: -this.stickyTop,
      })
      // 绑定观察的元素
      contentObserver.observe(`#${this.selectMark}-box`, (res) => {
        this.isFixed = this.stickyTop > res.boundingClientRect.bottom
      })
      this.contentObserver = contentObserver
    },

    disconnectObserver(observerName) {
      // 断掉观察，释放资源
      const observer = this[observerName]
      observer && observer.disconnect()
    },
    //滚动到指定位置
    queryMultipleNodes(name) {
      let that = this
      let lineWidth = 0
      let boxlet = 0
      let boxWidth = 0
      let maxLeft = 0
      let itemLeft = 0
      let moveX = 0
      this.$nextTick(() => {
        uni
          .createSelectorQuery()
          .select(`#${that.selectMark}`)
          .boundingClientRect()
          .select(`#${that.selectMark}-title-item-${name}`)
          .boundingClientRect()
          .select(`#${that.selectMark}-line`)
          .boundingClientRect()
          .select(`#${that.selectMark}-content`)
          .boundingClientRect()
          .exec(function (rects) {
            that.tabsHeight = Math.floor(rects[0].height + that.StatusBar + that.top / that.unitRatio)
            boxlet = rects[0].left
            boxWidth = rects[0].width
            lineWidth = rects[2].width

            if (rects[1] && rects[1].width && lineWidth > rects[1].width) {
              lineWidth = rects[1].width
              itemLeft = rects[1].left
            }
            maxLeft = rects[3].width - rects[0].width
            maxLeft = maxLeft < 0 ? 0 : maxLeft
            let query = uni.createSelectorQuery().select(`#${that.selectMark}`).scrollOffset()
            query.select(`#${that.selectMark}-title-item-${name}`).boundingClientRect()
            query.exec(function (res) {
              if (!res[1]) return
              itemLeft = that.tabsInfo.scrollX + res[1].left - boxlet + res[1].width / 2
              if (itemLeft >= boxWidth / 2) {
                moveX = itemLeft - boxWidth / 2
                moveX = moveX > maxLeft ? maxLeft : moveX
              } else {
                moveX = 0
              }
              that.$emit('update:tabsInfo', {
                ...that.tabsInfo,
                lineleft: itemLeft + 'px',
                lineWidth: lineWidth + 'px',
                moveX: moveX,
              })
              if (!that.tabsInfo.isInit) {
                setTimeout(() => {
                  that.$emit('update:tabs-info', {
                    ...that.tabsInfo,
                    isInit: true,
                  })
                }, 200)
              }
            })
          })
      })
    },
    setflag() {
      this.flag = false
      this.flagSetTimeoutFn && clearTimeout(this.flagSetTimeoutFn)
      this.flagSetTimeoutFn = setTimeout(() => {
        this.flag = true
      }, 1000)
    },
    pageScrollTo(name) {
      if (!this.isShowContent) return
      if (!this.scrollspy) return
      var that = this
      var query = uni.createSelectorQuery()
      query.selectViewport().scrollOffset()
      query.select(`#${this.selectMark}-body-item-${name}`).boundingClientRect()
      query.exec(function (res) {
        var miss = res[0].scrollTop - that.tabsHeight
        if (res[1]?.top) miss += res[1]?.top
        that.setflag()
        uni.pageScrollTo({
          scrollTop: miss,
          duration: 300,
        })
      })
    },
    // 获取主体高度
    getBodyHeight() {
      if (!this.isShowContent) return
      if (!this.scrollspy) return
      let that = this
      uni
        .createSelectorQuery()
        .selectAll(`.${this.selectMark}-body-item`)
        .boundingClientRect()
        .exec(function (res) {
          let tabs = []
          res[0].map((item, index) => {
            let name = item.id.replace(`${that.selectMark}-body-item-`, '')
            if (index == 0) {
              tabs.push({
                name,
                top: 0,
              })
            } else {
              tabs.push({
                name,
                top: item.top,
              })
            }
          })
          that.tabs = tabs
        })
    },
  },
  created() {},
  mounted() {
    this.$emit('update:tabs-info', {
      ...this.tabsInfo,
      lineleft: '0px',
      moveX: 0,
      isInit: false,
    })
    let updataFunc = () => {
      this.queryMultipleNodes(this.value)
      this.getBodyHeight()
      if (this.openSticky || this.openTitleType) {
        this.initObserveContent()
      }
    }
    // #ifndef APP-PLUS
    this.$nextTick(updataFunc)
    // #endif
    // #ifdef APP-PLUS
    setTimeout(updataFunc, 150)
    // #endif
  },
  beforeDestroy() {
    this.disconnectObserver('contentObserver')
  },
}
</script>
<style lang="scss" scoped></style>
